import React, { useEffect, useState } from 'react';
import { Menu } from 'antd';
import { routersData, menuData } from '../../router/router.config';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.less';
import img from '../../assets/image/logo.png';

const Menus: React.FC = () => {
  //当前的key
  const [current, setCurrent] = useState('');
  const navigate = useNavigate();
  const key = location.pathname.split('/')[1];
  const [collapsed, setCollapsed] = useState(false);

  //点击跳转对应路由页面
  const onClick = (e: any) => {
    setCurrent(e.key);
    navigate(routersData[e.key].path);
  };

  //页面组件初始化的时候,设置对应菜单的key
  useEffect(() => {
    if (key) {
      setCurrent(key);
    }
  }, []);

  return (
    <div className={styles.navbar}>
      <div className={styles.logo}>
        <img src={img} className={styles.logo}></img>
        {collapsed ? '' : <span>企业中台</span>}
      </div>
      <Menu
        mode='inline'
        theme='dark'
        defaultSelectedKeys={[current]}
        onClick={onClick}
        style={{ width: '100%', height: '100%' }}
        selectedKeys={[current]}
        items={menuData}
      />
    </div>
  );
};

export default Menus;
